layui.use(['flow','jquery'], function(){
  var $ = layui.jquery;
  var flow = layui.flow;
  var $container = $('#masonry');
  $container.imagesLoaded(function() {
    $container.masonry({
      itemSelector: '.layui-box',
      gutter: 20,
      isAnimated: true,
    });
  });
  flow.load({
    elem: '#masonry'
    ,isAuto: false
    ,isLazyimg: false
    ,done: function(page, next){
      setTimeout(function(){
      var lis = [];
      $.get('/api.php?op=ajax_append&modelid=3&p='+page, function(res){
      	var data=eval("("+res+")");
        layui.each(data.list, function(index, item){
        	var str = data.list[index];
              str = str.replace(/&amp;/g, '&'); 
              str = str.replace(/&lt;/g, '<');
              str = str.replace(/&gt;/g, '>');
              str = str.replace(/&quot;/g, "''");  
              str = str.replace(/&#039;/g, "'");  
          lis.push(str);
          //alert(data.list[index]);
        }); 
        next(lis.join(''), page < 10);
        $('#masonry').imagesLoaded(function () {
          $('#masonry').masonry();
        });
      });
	 },500);
    }
  });
});